<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户订单</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="app">
      <table border="1px" width="800px" >
        <tr>
          <td>订单序号</td>
          <td>故障原因</td>
          <td>下单时间</td>
          <td>用户联系方式</td>
          <td>地址</td>
          <td>操作</td>
        </tr>
          <tr v-for="ordersinfo,index in ordersinfo">
              <td>订单序号{{index+1}}</td>
              <td>故障原因{{ordersinfo.faultDescription}}</td>
              <td>下单时间{{ordersinfo.orderTime}}</td>
              <td>用户联系方式{{ordersinfo.phone}}</td>
              <td>地址{{ordersinfo.heatingNumber.address}}</td>
              <td>操作</td>
          </tr>
      </table>

<button></button>
<button></button>
</div>
<button>总页数</button>
</body>
</html>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            ordersinfo:[],
            pageInfo:{},
            pageSize:5,
            userId:1,
        },
        created:function (){
            this.initData(1);
        },
        method:{
            initData:function(pageNum){
                axios.post("http://localhost:8080/userViewOrder/allInfo?pageNum=" + pageNum + "&pageSize=" + this.pageSize+"&userId="+this.userId)
                    .then(res => {
                        console.log(res.data.data.list);
                        this.ordersinfo = res.data.data.list;
                        this.pageInfo = res.data.data;
                    });
            }
        }

    })
</script>